<template>
	<view>
		<view class="register-con flex align-center justify-between">
			<view></view>
			<view @tap='toRegister'>注册</view>
		</view>
		<view class="contenr flex flex-direction align-center">
			<input placeholder="手机号" v-model="username" />
			<view class="sms-inp flex align-center justify-between">
				<input placeholder="短信验证码" v-model="password" />
				<view @click="sms" class="sms-btn flex align-center justify-center">
					<text v-if="!isStopwatch">获取验证码</text>
					<text v-else>{{time}}S后重发</text>
				</view>
			</view>
			<button class="flex align-center justify-center" @tap="login"><text>立即登录</text></button>
			<view class="zhaohui flex justify-center justify-center">
				<view class="flex align-center" @tap='toLogin'>安全登录</view>
				<view class="flex align-center" @tap='forgetPassword'>快速找回密码</view>
			</view>
			<view class="bottom flex align-center justify-center">
				<text>——</text>
				<image src="/static/a8.png"></image>
				<text @tap="toWxLogin">微信快速登录</text>
				<text>——</text>
			</view>
		</view>
	</view>
</template>

<script>
	var api = require('@/components/api.js');
	export default {
		data() {
			return {
				loading: false,
				username: "",
				password: "",
				code:'',
				isStopwatch: false,
				time: 60
			}
		},
		methods: {
			login() {
				this.loading = true;
				if (this.username == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入手机号'
					});
					this.loading = false;
					return;
				}
				if (this.password == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入验证码'
					});
					this.loading = false;
					return;
				}
				if (this.password != this.code) {
					uni.showToast({
						icon: 'none',
						title: '验证码错误'
					});
					this.loading = false;
					return;
				}
				api.get({
					url: 'User/GetCodeLogin',
					data: {
						username: this.username,
					},
					success: data => {
						console.log(data);
						if (data.ErrCode == 0) {
							this.loading = false;
							console.log(data);
							uni.showToast({
								duration: 500,
								icon: 'success',
								title: data.ErrMsg
							});
							uni.setStorageSync('user', data.Response)
							//强制页面重载，跳转到首页
							uni.reLaunch({
								url: '../index/index'
							});
							uni.setStorageSync('upload', 1)
							uni.setStorageSync('login', 1)
							uni.setStorageSync('token', data.Response)
							uni.setStorageSync('user', data.Response)
							setTimeout((e => {
								uni.navigateBack();
							}), 500);
						}
						if (data.ErrCode == 1) {
							this.loading = false;
							uni.showToast({
								duration: 1500,
								icon: 'none',
								title: data.ErrMsg
							});
						}
					}
				})
			},
			toRegister() {
			
				uni.navigateTo({
					url: '/pages/register/register'
				})
			
			},
			toLogin() {

				uni.navigateTo({
					url: '/pages/login/login'
				})

			},
			toWxLogin() {
			
				uni.navigateTo({
					url: '/pages/wxLogin/wxLogin'
				})
			
			},
			forgetPassword() {
				uni.navigateTo({
					url: "/pages/forgetPassword/forgetPassword"
				})
			},
			sms() {
				if(this.isStopwatch){
					return;
				}
				if(!this.username){
					uni.showToast({
						icon:'none',
						title:'请输入手机号码'
					})
					return;
				}
				api.get({
					url: 'User/GetLoginMobileCode',
					data: {
						mobile: this.username
					},
					success: data => {
						console.info(JSON.stringify(data))
						if (data.ErrCode == 0) {
							this.code = data.Response.code
							uni.showToast({
								icon:'none',
								title:'已发送'
							})
						}
					}
				});
				this.isStopwatch = true
				this.setMyTime();
			},
			setMyTime() {
				console.log(this.time)
				if (this.time > 0) {
					this.time = --this.time
					setTimeout(() => this.setMyTime(), 1000);
				} else {
					this.time = 60
					this.isStopwatch = false
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.sms-btn {
		width: 178upx;
		border-left: 1upx solid #999999;
	}

	.sms-btn text {
		font-size: 26upx;
		color: #999999;
	}

	.register-con {
		padding: 0 30upx;
		box-sizing: border-box;
		height: 120upx;
	}

	.bottom text:nth-child(1),
	.bottom text:nth-child(4) {
		color: #999999;
	}

	.bottom text:nth-child(3) {
		font-size: 26upx;
		color: #000000;
	}

	.bottom image {
		width: 37upx;
		height: 30upx;
		margin-right: 16upx;
	}

	.bottom {
		margin-top: 80upx;
	}

	.zhaohui view {
		padding: 0 30upx;
		height: 26upx;
		margin-top: 50upx;
	}

	.zhaohui view:nth-child(1) {
		border-right: 1upx solid #999999;
		font-size: 26upx;
		color: #444444;
		line-height: 36upx;
	}

	.contenr button {
		margin-top: 10upx;
		width: 660upx;
		height: 72upx;
		background-color: $btn-bground;
		border-radius: 35upx;
		padding: 0;
	}

	.contenr button text {
		font-size: 28upx;
		color: #ffffff;
	}

	.sms-inp {
		width: 660upx;
		height: 70upx;
		background-color: #f0f0f0;
		border-radius: 35upx;
		margin-bottom: 30upx;
	}

	.sms-inp {
		padding-left: 42upx;
		box-sizing: border-box;
	}

	.contenr>input {
		width: 660upx;
		height: 70upx;
		background-color: #f0f0f0;
		border-radius: 35upx;
		padding-left: 42upx;
		margin-bottom: 30upx;
	}

	page {
		background-color: #fff;
	}
</style>
